<script setup lang="ts">
import { computed, ref } from 'vue';

// 定义事件类型接口，匹配后端Event实体
interface Event {
  eventId?: number;
  eventID?: string;
  eventName: string;
  eventTime: string;
  eventDesc: string;
  eventLocation: string;
  eventImg?: string;
  eventCategory: string;
  price: number;
  isFeatured: boolean;
}

// 接收父组件参数
const props = defineProps<{
  event: Event;
  isRegistered: boolean;
}>();

// 定义事件发射器
const emit = defineEmits<{
  (e: 'register', eventId: number): void;
  (e: 'cancel-registration', eventId: number): void;
}>();

// 🎯 新增：防止重复点击
const isSubmitting = ref(false);

// 计算属性：判断活动是否已结束
const isPastEvent = computed(() => {
  if (!props.event.eventTime) return false;
  const eventDate = new Date(props.event.eventTime);
  return new Date() > eventDate;
});

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return "暂无时间";
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取事件ID
const getEventId = (): number => {
  const eventId = props.event.eventID || props.event.eventId;
  if (!eventId) {
    console.error('EventCard: 无法获取事件ID', props.event);
    return 0;
  }
  return Number(eventId);
};

// 🎯 修复：只有一个 handleJoinEvent 函数
const handleJoinEvent = () => {
  // 🎯 修复：防止重复点击
  if (isSubmitting.value) {
    console.log('正在处理中，请勿重复点击');
    return;
  }

  const eventId = getEventId();
  if (eventId === 0) {
    console.error('EventCard: 无效的事件ID');
    return;
  }

  isSubmitting.value = true;
  emit('register', eventId);

  // 🎯 修复：1秒后重置状态，避免长时间禁用
  setTimeout(() => {
    isSubmitting.value = false;
  }, 1000);
};

// 🎯 修复：只有一个 handleCancelEvent 函数
const handleCancelEvent = () => {
  if (isSubmitting.value) {
    console.log('正在处理中，请勿重复点击');
    return;
  }

  const eventId = getEventId();
  if (eventId === 0) {
    console.error('EventCard: 无效的事件ID');
    return;
  }

  isSubmitting.value = true;
  emit('cancel-registration', eventId);

  setTimeout(() => {
    isSubmitting.value = false;
  }, 1000);
};
</script>

<template>
  <div class="event-card" :class="{ 'featured': event.isFeatured, 'past': isPastEvent }">
    <div class="event-image">
      <img
        :src="event.eventImg || 'https://picsum.photos/400/225?random=' + event.eventId"
        :alt="event.eventName"
        class="event-img"
      >
      <span v-if="event.isFeatured" class="featured-badge">精选</span>
      <span v-if="isPastEvent" class="past-badge">已结束</span>
    </div>

    <div class="event-content">
      <div class="event-header">
        <h3 class="event-title">{{ event.eventName }}</h3>
        <div class="event-meta">
          <div class="event-date">
            <i class="icon-calendar">📅</i>
            <span>{{ formatDate(event.eventTime) }}</span>
          </div>
          <div class="event-category">
            <span class="category-tag">{{ event.eventCategory }}</span>
          </div>
        </div>
      </div>

      <div class="event-details">
        <p class="event-description">{{ event.eventDesc }}</p>
        <div class="event-location">
          <i class="icon-map-marker">📍</i>
          <span>{{ event.eventLocation }}</span>
        </div>
      </div>

      <div class="event-footer">
        <div class="event-price">
          {{ event.price === 0 ? '免费' : '¥' + event.price }}
        </div>
        <div class="event-actions">
          <button
            class="join-btn"
            @click="handleJoinEvent"
            :disabled="isRegistered || isPastEvent || isSubmitting"
          >
            {{ isSubmitting ? '处理中...' : (isRegistered ? '已报名' : '参加活动') }}
          </button>
          <button
            class="cancel-btn"
            @click="handleCancelEvent"
            v-if="isRegistered && !isPastEvent"
            :disabled="isSubmitting"
          >
            {{ isSubmitting ? '处理中...' : '取消报名' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 样式保持不变 */
.event-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.event-card.featured {
  border-color: #31B310;
  box-shadow: 0 4px 16px rgba(49, 179, 16, 0.2);
}

.event-card.past {
  opacity: 0.7;
}

.event-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.event-card:hover .event-img {
  transform: scale(1.05);
}

.featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #31B310, #2a990e);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.past-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ff4d4f, #d9363e);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.event-content {
  padding: 20px;
}

.event-header {
  margin-bottom: 15px;
}

.event-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #2c3e50;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.event-date {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
  flex: 1;
}

.icon-calendar {
  margin-right: 6px;
  color: #31B310;
}

.category-tag {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.event-details {
  margin-bottom: 20px;
}

.event-description {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-location {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.icon-map-marker {
  margin-right: 6px;
  color: #ff4d4f;
}

.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.event-price {
  font-weight: bold;
  color: #ff4d4f;
  font-size: 16px;
  white-space: nowrap;
}

.event-actions {
  display: flex;
  gap: 8px;
}

.join-btn, .cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  min-width: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.join-btn {
  background: linear-gradient(135deg, #31B310, #2a990e);
  color: white;
}

.join-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.join-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cancel-btn {
  background: linear-gradient(135deg, #ff4d4f, #d9363e);
  color: white;
}

.cancel-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cancel-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .event-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .event-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .event-actions {
    justify-content: space-between;
  }

  .join-btn, .cancel-btn {
    flex: 1;
  }
}
</style>
